<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/alogin.css">
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <title>乡村管理员登录</title>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="12">
            <div class="sl-left">

            </div>
        </el-col>
        <el-col :span="12">
            <div class="sl-right">
                <div class="main-box login-form">
                    <h1 style="text-align: center;">智慧乡村管理系统</h1>
                    <h4 style="text-align: center;">- 管理员端 -</h4>
                    <form id="loginForm">
                        <input placeholder="账号" required type="text" v-model="loginForm.username">
                        <input placeholder="密码" required type="password" v-model="loginForm.password">
                        <el-button @click="handleLogin" type="submit">登录</el-button>
                    </form>
                </div>
            </div>
        </el-col>
    </el-row>
</div>

</body>
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loginForm: {
                    username: '',
                    password: ''
                },
                loginFormRules: {
                    username: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }],
                    password: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }]
                },
                overlaylong: 'overlaylong',
                overlaytitle: 'overlaytitle',
                disfiex: 0
            }
        },
        created() {

        },
        methods: {
            handleLogin() {
                try {
                    axios.post('http://localhost:8080/account/adminLogin', {
                        username: this.loginForm.username,
                        password: this.loginForm.password
                    }).then(response => {
                        const responseData = response.data;
                        console.log(responseData);
                        if (responseData.code === 1) {
                            console.log('登录成功');
                            // 登录成功后将 token 存储在 localStorage 中
                            localStorage.setItem('token', responseData.data.token);
                            window.location.href = "./admin_home.html";
                        } else {
                            console.error('登录失败：', responseData);
                            this.$message.error(responseData.msg);
                        }
                    });
                } catch (error) {
                    console.error('登录失败：', error);
                }
            },
        }
    })
</script>
</html>